Icons

CFA Institute Brand Icon Set

cfaicon-add
cfaicon-alpha_symbol
cfaicon-arrow_down
cfaicon-arrow_down_2
cfaicon-arrow_left
cfaicon-arrow_right
cfaicon-arrow_up
cfaicon-arrow_up_2
cfaicon-audio
cfaicon-balance_scale
cfaicon-bar_chart
cfaicon-bar_chart_2
cfaicon-beta_symbol
cfaicon-book
cfaicon-book_bookmark
cfaicon-book_open
cfaicon-bookmark
cfaicon-brain_connections
cfaicon-bridge
cfaicon-calculator
cfaicon-calendar
cfaicon-certificate
cfaicon-chart
cfaicon-chart_2
cfaicon-checkmark
cfaicon-circles_divided
cfaicon-clipboard
cfaicon-clock
cfaicon-cloud_download
cfaicon-cloud_lightning
cfaicon-cloud_refresh
cfaicon-cloud_upload
cfaicon-comment
cfaicon-communication
cfaicon-communication_2
cfaicon-compass
cfaicon-connections
cfaicon-connections_2
cfaicon-currency_risk
cfaicon-currency_risk_2
cfaicon-envelope
cfaicon-filter
cfaicon-folded_paper
cfaicon-four_point_star
cfaicon-gear
cfaicon-globe
cfaicon-globe_magglass
cfaicon-government
cfaicon-graduation_hat
cfaicon-graph
cfaicon-graph_arrow_down
cfaicon-graph_arrow_plateau
cfaicon-graph_arrow_up
cfaicon-graph_points
cfaicon-graph_up
cfaicon-graph_up_down_2
cfaicon-graph_up_down_3
cfaicon-graph_xy_axis
cfaicon-hamburger_menu
cfaicon-hazardous
cfaicon-heart_1
cfaicon-heart_2
cfaicon-hourglass
cfaicon-industry
cfaicon-info
cfaicon-laptop
cfaicon-lightbulb
cfaicon-location
cfaicon-location_2
cfaicon-lock
cfaicon-luggage
cfaicon-magnifying_glass
cfaicon-map
cfaicon-measurement
cfaicon-megaphone
cfaicon-mobile_phone
cfaicon-mobile_phone_wifi
cfaicon-mobile_phone_wifi_2
cfaicon-molecule
cfaicon-monitor
cfaicon-monitor_2
cfaicon-newspaper
cfaicon-paper_pen
cfaicon-phi_symbol
cfaicon-phone
cfaicon-pie_chart
cfaicon-pie_chart_2
cfaicon-play_button
cfaicon-printer
cfaicon-profile
cfaicon-profile_2
cfaicon-profile_small
cfaicon-question_mark
cfaicon-raising_hand
cfaicon-raising_hand_2
cfaicon-refresh
cfaicon-refresh_2
cfaicon-savings
cfaicon-server_network
cfaicon-signpost
cfaicon-speedometer
cfaicon-speedometer_2
cfaicon-stairs
cfaicon-stairs_2
cfaicon-star
cfaicon-subtract
cfaicon-tag
cfaicon-target
cfaicon-target_2
cfaicon-three_people
cfaicon-ticket
cfaicon-umbrella
cfaicon-universal_access
cfaicon-v_card
cfaicon-x

Formatting

Use the cfaicon-* class name for a particular icon on span tags.

Colors, Borders, and Backgrounds

  • To add color to an icon, add a color class along with the icon class list.
    • p_blue, p_green, p_purple, p_coolgray10, s_bgblue, s_purple, s_darkblue, s_red, t_darkorange, and white are valid brand/WCAG-safe color classes.
    • The default icon color is the same as text.
  • To add a circular border to an icon, add the border class along with the icon class.
  • For a solid background, add the solid class along with the icon class.
  • Current acceptable color classes for borders and solid backgrounds are: p_blue, p_green, p_purple, p_coolgray10, s_bgblue, s_purple, s_darkblue, s_red, and t_darkorange.
  • For solid backgrounds, the icon itself will always be white.

Examples:

cfaicon-x s_red

cfaicon-checkmark p_green

cfaicon-hourglass border p_green

cfaicon-subtract solid p_coolgray10